import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import type { AddType } from '@/api/types'
import type { InsureIndustryListDto, InsureOccupationDto } from '@/api/insureIndustry/types'
import { getKeyToEnum, OccupationLevelCnEnum } from '@/const/enum'
import { addOccupation, editOccupation } from '@/api/insureIndustry'
@Component
export class AddWorkTypesPop extends Render {
    @Prop({ default: false }) show!: boolean
    @Prop() addType!: AddType
    @Prop() curData?: InsureIndustryListDto | InsureOccupationDto

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.formConfig.show = this.show
        console.log(999, this.curData)

        if (this.addType === 'add') {
            this.formConfig.items.industryId.options = [
                {
                    label: this.curData?.name,
                    value: this.curData?.id
                }
            ]
            initModelValue(this.formConfig, {
                industryId: this.curData?.id
            })
        } else {
            console.log(999, this.curData)
            const curData = this.curData as InsureOccupationDto
            this.formConfig.items.industryId.options = [
                {
                    label: curData.industryName,
                    value: curData.industryId
                }
            ]
            initModelValue(this.formConfig, this.curData)
        }
        this.formConfig.items.industryId.readonly = true
    }

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '添加工种',
            width: '450px',
            theme: 'dark',
            show: false,
            params: {
                confirmText: '确定'
            },
            items: {
                industryId: {
                    name: '行业名称',
                    element: 'select'
                },
                name: {
                    name: '工种名称',
                    element: 'input',
                    required: true
                },
                level: {
                    name: '风险等级',
                    element: 'select',
                    options: getKeyToEnum(OccupationLevelCnEnum),
                    required: true
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                if (this.addType === 'add') {
                    await addOccupation(data)
                } else {
                    data.id = this.curData?.id
                    await editOccupation(data)
                }
                this.handleRefresh()
                this.handleClose()
            },
            cancel: () => {
                this.handleClose()
            }
        } as FormModalDto
    }

    handleClose() {
        this.formConfig.show = false
        this.showChange(false)
    }

    render() {
        return <>{renderModal(this.formConfig)}</>
    }
}

export default toNative<
    { addType: AddType; curData: InsureIndustryListDto | InsureOccupationDto },
    { refresh: () => void }
        >(AddWorkTypesPop)
